<template>
   <div>
      <div id="login-box_home" :style="dialogVisible">
         <div class="login-box_l">
            <img src="https://api.kmanstage.com/login-side_1.jpg" style="width: 240px; height: 400px;" alt="">
         </div>
         <div class="login-box_r">
            <div class="login-box_close" @click="handleClose"><i class="iconfont icon-guanbi"></i></div>
            <p class="login-box_logo"><img src="../assets/images/logo1.png" alt=""></p>

            <p class="login-box_desc" :style="operationToolsVisibleStyle"><span>介绍</span></p>

            <div class="operation-tools" :style="operationToolsVisibleStyle">
               <a class="new-phone-btn" href="javascript:void(0);" name="login_phone" @click="toPhoneLoginPanel(login)">
                  <div class="contact-phone">
                     <p><i class="iconfont icon-jiantouxiao-zuo" style="vertical-align: -2px;"></i>{{ login ?
                        loginWA.title : registWA.title }}</p>
                  </div>
                  <!-- <div class="lastTime">（上次登录）</div> -->
               </a>
               <!-- <a href="javascript:;" class="switch-login-passwd">账号密码登录</a> -->
               <div class="operation-tool contact-qq">
                  <a name="login_qq" @click="qqLoginClick">
                     <div class="operation-area">
                        <i class="iconfont icon-waiyin-qq"></i>
                     </div>
                     <p style="color: #ffffff !important;">{{ login ? loginWA.qqLogin : registWA.qqRegist }}</p>
                  </a>
               </div>
               <div class="operation-tool contact-wx">
                  <a name="login_weixin" href="javascript:void(0);" @click="showWeixinPop()">
                     <div class="operation-area">
                        <i class="iconfont icon-waiyin-weixin"></i>
                     </div>
                     <p style="color: #ffffff !important;">{{ login ? loginWA.wxLogin : registWA.wxRegist }}</p>
                  </a>
               </div>
            </div>

            <!-- 登录内容part -->
            <div :class="phoneLoginPanelVisibleClass">
               <p class="login-area_ways">
                  <span :class="loginActive" name="tab_code_login" @click="toVerfyLoginPanel">验证码登录</span>
                  <span name="tab_passwd_login" :class="loginNotActive" @click="toPasswordLoginPanel">账号密码登录</span>
               </p>
               <div class="login-area_content">
                  <div :class="verfyLoginPanelVisible">
                     <input @input="onChange" v-model="phone" type="text" maxlength="11" :disabled="!siteConfig.ad.sms_open ? true : false"
                        class="login-area_number js-input-phone js-focus-phone" name="phone_code_login" :style="!siteConfig.ad.sms_open ? 'background:#ffffff' : ''"
                        data-phone="login-area_number" placeholder="请输入手机号" />
                     <div class="code">
                        <input type="number" :disabled="!siteConfig.ad.sms_open ? true : false" v-model="code" class="login-area_code js-area-code" name="code_code_login"
                           data-area="login-area_code" placeholder="请输入验证码" autocomplete="off"  :style="!siteConfig.ad.sms_open ? 'background:#ffffff' : ''" />
                        <form theme="simple" onsubmit="return false;" style="height:100%;">
                           <button :class="showVerfyBtn" :disabled="!siteConfig.ad.sms_open ? true : false" @click="getSendCode" name="getcode_code_login">{{ btnText
                              }}</button>
                        </form>
                     </div>
                     <button class="js-phone-login-btn login-area_item-passwd js-btn-submit" name="btn_code_login"
                        @click="codeLogin">登录</button>
                  </div>
                  <div :class="passwordLoginPanelVisible">
                     <input type="text" v-model="phone2" class="login-area_account js-focus-phone"
                        name="phone_passwd_login" placeholder="请输入手机" autocomplete="off">
                     <div>
                        <input type="password" v-model="password" class="login-area_pwd" name="passwd_passwd_login"
                           placeholder="请输入密码" autocomplete="off">
                     </div>
                     <!-- <a href="/register/resetPasswd" target="_blank">忘记密码</a> -->
                     <button class="js-account-login-btn  js-btn-submit" name="btn_passwd_login"
                        @click="passwordLogin">登录</button>
                  </div>
               </div>
            </div>

            <!-- 注册内容part -->
            <div :class="phoneRegistPanelClass">
               <p class="regist-area_ways">
                  <span :class="registActive" name="tab_code_regist" @click="toVerfyRegistPanel">验证码注册</span>
                  <span :class="registNotActive" @click="toPasswordRegistPanel" name="tab_passwd_regist">账号密码注册</span>
               </p>
               <div class="regist-area_content">
                  <div :class="verfyRegistPanelVisible">

                     <input @input="onChange1" type="text" maxlength="11" v-model="phone3"
                        class="regist-area_number js-input-phone js-focus-phone" name="phone_code_regist"
                        data-phone="regist-area_number" placeholder="请输入手机号">
                     <div class="code">
                        <input type="number" v-model="code3" class="regist-area_code js-area-code"
                           name="code_code_regist" data-area="js-area-code" placeholder="请输入验证码" autocomplete="off">
                        <form theme="simple" onsubmit="return false;" style="height:100%;">
                           <button :class="showVerfyBtn1" name="getcode_code_regist">获取验证码</button>
                        </form>
                     </div>
                     <button class="js-phone-regist-btn js-btn-submit" name="btn_code_regist"
                        @click="codeRegist">注册</button>
                  </div>
                  <div :class="passwordRegistPanelVisible">
                     <input @input="onChange2" type="text" v-model="phone4"
                        class="regist-area_account js-input-phone js-focus-phone" name="phone_passwd_regist"
                        data-phone="regist-area_account" placeholder="请输入手机号" autocomplete="off">
                     <div class="code">
                        <input type="number" v-model="code4" class="regist-area_code js-area-code"
                           name="code_passwd_regist" data-area="regist-area_code" placeholder="请输入验证码"
                           autocomplete="off">
                        <form theme="simple" onsubmit="return false;" style="height:100%;">
                           <button :class="showVerfyBtn2" name="getcode_passwd_regist">获取验证码</button>
                        </form>
                     </div>
                     <div>
                        <input type="password" v-model="password4" class="regist-area_pwd js-area-pwd"
                           name="passwd_passwd_regist" placeholder="请设置密码" autocomplete="off">
                     </div>
                     <button class="js-account-regist-btn js-btn-submit" name="btn_passwd_regist"
                        style="margin-top: 15px;" @click="passwordRegist">注册</button>
                  </div>
               </div>
            </div>

            <div class="bottom-control">
               <!-- // <p :class="goRegist" @click="toRegistPanel">没有账号？<span class="go-regist_span">立即注册</span></p> -->
               <p :class="goLoginPhone" @click="toLoginPanel">已有账号，<span class="go-login_span">立即登录</span></p>
               <p :class="goLoginQqWx" @click="toWexQQLoginPanel"><i class="iconfont icon-jiantouxiao-zuo"></i>微信/QQ登录
               </p>
               <p :class="goRegistQqWx" @click="toWexQQRegistPanel"><i class="iconfont icon-jiantouxiao-zuo"></i>微信/QQ注册
               </p>
            </div>
            <p :class="tkClass">注册即表明同意<a href="/protocol.html" target="_blank">使用条款和隐私策略</a></p>
         </div>
      </div>
      <div id="new-login-mask" :style="dialogVisible"></div>
   </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElLoading } from "element-plus";
import { doLogin, sendMobileCode, qqDoLogin } from '../api/home/index'
import router from '../router'
import { useUserInfo } from '../stores/userInfo'
import { useSiteConfig } from '../stores/siteConfig';
const userInfo = useUserInfo() //获取用户信息
const siteConfig = useSiteConfig()
// import QC from  '../js/qqsdk'

// 定义响应式变量  
const dialogVisible = ref<string>("display:block; background-image: url('" + siteConfig.login_img + "');background-size: 100% 100%;");
const operationToolsVisibleStyle = ref<string>("display:block;");
const phoneLoginPanelVisibleClass = ref<string>("login-area_new hide");
const phoneRegistPanelClass = ref<string>("regist-area_new hide");
const goLoginQqWx = ref<string>("go-login_qqwx hide");
const goRegistQqWx = ref<string>("go-regist_qqwx hide");
const goLoginPhone = ref<string>("go-login hide");
const goRegist = ref<string>("go-regist");
const showVerfyBtn = ref<string>("disabled js-get-verify-btn js-get-verify-btn-0");
const showVerfyBtn1 = ref<string>("disabled js-get-verify-btn js-get-verify-btn-1");
const showVerfyBtn2 = ref<string>("disabled js-get-verify-btn js-get-verify-btn-2");
const loginActive = ref<string>("active");
const loginNotActive = ref<string>("");
const registActive = ref<string>("active");
const registNotActive = ref<string>("");
const verfyLoginPanelVisible = ref<string>("login-area_item login-area_item-phone js-area_item");
const passwordLoginPanelVisible = ref<string>("login-area_item login-area_item-passwd js-area_item hide");
const verfyRegistPanelVisible = ref<string>("regist-area_item regist-area_item-phone js-area_item");
const passwordRegistPanelVisible = ref<string>("regist-area_item regist-area_item-passwd js-area_item hide");
const login = ref<boolean>(true);

const loginWA = ref<{ qqLogin: string; wxLogin: string; title: string }>({
   qqLogin: 'QQ登录',
   wxLogin: '微信登录',
   title: '手机登录'
});

const registWA = ref<{ qqRegist: string; wxRegist: string; title: string }>({
   qqRegist: 'QQ注册',
   wxRegist: '微信注册',
   title: '手机注册'
});

const tkClass = ref<string>("regist-text-tips hide");

// 其他表单相关的响应式变量  
const phone = ref<string>("");
const code = ref<string>("");
const phone2 = ref<string>("");
const password = ref<string>("");
const phone3 = ref<string>("");
const code3 = ref<string>("");
const phone4 = ref<string>("");
const code4 = ref<string>("");
const password4 = ref<string>("");

const handleClose = () => {
   router.push({ name: "/" })
}

const toPhoneRegistPanel = () => {
   operationToolsVisibleStyle.value = 'display:none;';
   phoneRegistPanelClass.value = 'regist-area_new'; // 假设这里你只是想移除 'hide' 类  
   goRegistQqWx.value = 'go-regist_qqwx'; // 根据需要可能还要添加其他样式或类  
   goLoginQqWx.value = 'go-login_qqwx hide';
   tkClass.value = 'regist-text-tips hide'; // 如果这个类不需要改变，这行可以省略  
}
const toPhoneLoginPanel = (login: boolean) => {
   if (login) {
      operationToolsVisibleStyle.value = 'display:none;';
      phoneLoginPanelVisibleClass.value = 'login-area_new'; // 移除 'hide' 类以显示面板  
      goLoginQqWx.value = 'go-login_qqwx'; // 可能还需要根据具体需求调整样式或类  
   } else {
      toPhoneRegistPanel();
   }
}
const toWexQQLoginPanel = () => {
   login.value = true; // 更新登录状态  
   operationToolsVisibleStyle.value = 'display:block;'; // 显示操作工具  
   phoneLoginPanelVisibleClass.value = 'login-area_new hide'; // 隐藏手机登录面板  
   goLoginQqWx.value = 'go-login_qqwx hide'; // 可能需要根据实际情况调整，但这里保持隐藏  
}
// toWexQQRegistPanel 方法  
const toWexQQRegistPanel = () => {
   login.value = false; // 设置为非登录状态（注册）  
   operationToolsVisibleStyle.value = 'display:block;'; // 显示操作工具  
   phoneRegistPanelClass.value = 'regist-area_new'; // 显示注册面板  
   goRegistQqWx.value = 'go-regist_qqwx'; // 可能还需要调整样式以显示QQ/WX注册按钮  
}
// 登录面板密码和验证码切换
const toPasswordLoginPanel = () => {
   loginActive.value = '';
   loginNotActive.value = 'active';
   verfyLoginPanelVisible.value = 'login-area_item login-area_item-phone js-area_item hide';
   passwordLoginPanelVisible.value = 'login-area_item login-area_item-passwd js-area_item';
}
const toVerfyLoginPanel = () => {
   loginActive.value = 'active';
   loginNotActive.value = '';
   verfyLoginPanelVisible.value = 'login-area_item login-area_item-phone js-area_item';
   passwordLoginPanelVisible.value = 'login-area_item login-area_item-passwd js-area_item hide';
}
// 注册密码和验证码面板切换
const toVerfyRegistPanel = () => {
   registActive.value = 'active';
   registNotActive.value = '';
   verfyRegistPanelVisible.value = 'regist-area_item regist-area_item-phone js-area_item';
   passwordRegistPanelVisible.value = 'regist-area_item regist-area_item-passwd js-area_item hide';
}
const toPasswordRegistPanel = () => {
   registActive.value = '';
   registNotActive.value = 'active';
   verfyRegistPanelVisible.value = 'regist-area_item regist-area_item-phone js-area_item hide';
   passwordRegistPanelVisible.value = 'regist-area_item regist-area_item-passwd js-area_item';
}

const toRegistPanel = () => {
   login.value = false;
   tkClass.value = 'regist-text-tips';
   goRegist.value = 'go-regist hide';
   goLoginPhone.value = 'go-login';
   toWexQQLoginPanel();
   toWexQQRegistPanel();
}

const toLoginPanel = () => {
   login.value = true;
   tkClass.value = 'regist-text-tips hide';
   goRegist.value = 'go-regist';
   goLoginPhone.value = 'go-login hide';
   toWexQQRegistPanel();
   toWexQQLoginPanel();
}
const onChange = (e: any) => {
   if (isPone(phone.value)) {
      showVerfyBtn.value = 'js-get-verify-btn js-get-verify-btn-0';
   } else {
      showVerfyBtn.value = 'disabled js-get-verify-btn js-get-verify-btn-0';
   }
}

const onChange1 = (e: any) => {
   if (isPone(phone3.value)) {
      showVerfyBtn1.value = 'js-get-verify-btn js-get-verify-btn-1';
   } else {
      showVerfyBtn1.value = 'disabled js-get-verify-btn js-get-verify-btn-1';
   }
}

const onChange2 = (e: any) => {
   if (isPone(phone4.value)) {
      showVerfyBtn2.value = 'js-get-verify-btn js-get-verify-btn-2';
   } else {
      showVerfyBtn2.value = 'disabled js-get-verify-btn js-get-verify-btn-2';
   }
}

//验证码登录
const codeLogin = () => {
   if(!siteConfig.ad.sms_open){
      return  ElMessage.error('暂未开通,请用账号密码登录')
   }
   const obj = { username: phone.value, password: password.value, code: code.value, passwordShow: false };

   if (phone.value === '') {
      isOpen('手机号不能为空');
      return;
   }
   if (!isPone(phone.value)) {
      isOpen('手机号格式不正确');
      return;
   }
   if (code.value === '') {
      isOpen('验证码不能为空');
      return;
   }
   const loading = ElLoading.service({
      lock: true,
      text: '请稍等,正在登录中...',
      background: 'rgba(0, 0, 0, 0.7)',
   })
   doLogin(obj).then((res: any) => {
      if (res.code == 1) {
         userInfo.dataFill(res.data.userInfo)
         router.push({name:res.data.routePath})
      }
   }).catch((error) => {
      if (error.code === 0) {
         ElMessage.error(error.msg)
      } else if (error.code === 'ERR_CANCELED') {
         ElMessage.error("请求错误")
      } else {
         ElMessage.error("未知错误")
      }
   }).finally(()=>{
      loading.close()
   });;
}
//密码登录
const passwordLogin = () => {
   const obj = { username: phone2.value, password: password.value, code: code.value, passwordShow: true };
   if (phone2.value === '') {
      isOpen('手机号不能为空');
      return;
   }
   if (!isPone(phone2.value)) {
      isOpen('手机号格式不正确');
      return;
   }
   if (password.value === '') {
      isOpen('密码不能为空');
      return;
   }
   const loading = ElLoading.service({
      lock: true,
      text: '请稍等,正在登录中...',
      background: 'rgba(0, 0, 0, 0.7)',
   })
   doLogin(obj).then((res: any) => {
      if (res.code == 1) {
         userInfo.dataFill(res.data.userInfo)
       
         router.go(-1)
      }

   }).catch((err: any) => {
      if (err.code === 0) {
         ElMessage.error(err.msg)
      } else if (err.code === 'ERR_CANCELED') {
         ElMessage.error("请求错误")
      } else {
         ElMessage.error("未知错误")
      }
   }).finally(()=>{
      loading.close()
   });
}


const codeRegist = () => {
   const obj = { phone: phone3.value, code: code3.value };
   if (phone3.value === '') {
      isOpen('手机号不能为空');
      return;
   }
   if (!isPone(phone3.value)) {
      isOpen('手机号格式不正确');
      return;
   }
   if (code3.value === '') {
      isOpen('验证码不能为空');
      return;
   }
}
const passwordRegist = () => {
   if (phone4.value === '') {
      isOpen('手机号不能为空');
      return;
   }
   if (!isPone(phone4.value)) {
      isOpen('手机号格式不正确');
      return;
   }
   if (code4.value === '') {
      isOpen('验证码不能为空');
      return;
   }
   if (password4.value === '') {
      isOpen('密码不能为空');
      return;
   }
   const obj = { phone: phone4.value, code: code4.value, password: password4.value };

}

//qq登录
const qqLoginClick = () => {
   if(!siteConfig.ad.sms_open){
      return  ElMessage.error('暂未开通,请用账号密码登录')
   }
   qqDoLogin().then((res: any) => {
      if (res.code == 1) {
         window.location.href = res.data.routePath
      }
   })
}

const showWeixinPop = () => {

   isOpen('暂未开通,请用账号密码登录');
   return;
}


const isPone = (text: any) => {
   var myreg = /^1[3,4,5,6,7,8]\d{9}$/;
   if (!myreg.test(text)) {
      return false;
   } else {
      return true;
   }
}
const isOpen = (text: any) => {
   ElMessage.error(text)
}
const totalTime = 60                // 倒计时时间
const countingDown = ref(false)     // 倒计时状态
// 倒计时剩余时间
const remainingTime = reactive({
   seconds: totalTime
})
// 计时器变量
let timer: NodeJS.Timeout | null = null
// 倒计时
const startCountingDown = () => {
   if (!countingDown.value) {
      countingDown.value = true
      remainingTime.seconds = totalTime
   }
   timer = setInterval(() => {
      if (remainingTime.seconds > 0) {
         remainingTime.seconds--
      } else {
         stopCountingDown()
      }
   }, 1000)
}

// 倒计时停止
const stopCountingDown = () => {
   if (timer) {
      clearInterval(timer)
      timer = null
      countingDown.value = false
   }
}

// 按钮文字切换
const btnText = computed(() => (countingDown.value ? remainingTime.seconds + '秒后重发' : "获取验证码"))

//获取验证码
const getSendCode = () => {
   if(!siteConfig.ad.sms_open){
      return  ElMessage.error('暂未开通,请用账号密码登录')
   }
   code.value = '' //设置空
   try {
      sendMobileCode({ mobile: phone.value, status: 1 }).then((res: any) => {
         if (res.code == 1) {
            startCountingDown()
            code.value = res.data.list
         } else {
            ElMessage.error(res.msg)
         }
      })
   } catch {
      ElMessage.error('验证码发送失败')
   }
}

</script>

<style scoped>
@import url("../style/login.css");
</style>